<template>
  <div class="login-container">
    <div class="content">
      <div class="title-container">
        <h1 class="title">后台管理</h1>
      </div>
      <el-form class="login-form" ref="loginRef" :model="loginForm" :rules="loginRules">
        <el-form-item label="账号" prop='username'>
          <el-input
            v-model="loginForm.username"
            placeholder="请输入账号"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            @keyup.enter.native="submit(loginRef)"
            v-model="loginForm.password"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-button :loading="loading" type="primary" @click="submit(loginRef)" round>登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import { useRouter } from 'vue-router'
import { login } from '../apis/user'
const router = useRouter()
const loginRef = ref()
const loginForm = reactive({
  username: '',
  password: ''
})
const loading = ref(false)
const loginRules = reactive({
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ]
})
onMounted(()=>{
})
const submit =(loginRef)=>{
  console.log('deng录')
  loginRef.validate((valid)=>{
    if (valid) {
      console.log('登录');
      loading.value = true
      //进行登录校验,并把cookie存在本地
      let params = {
        username: loginForm.username,
        password: loginForm.password,
      }
      console.log(params, 'params');
      login(params).then(res=>{
        console.log(res);
        if (res.data.isok) {
          const tokenkey = res.data.token
          localStorage.setItem('cms_cookie', tokenkey)
          loading.value = false
          ElMessage({
            message: '登陆成功！',
            type: 'success',
          })
          router.push('/home')
        } else {
          loading.value = false
          ElMessage({
            message: res.data.errmsg,
            type: 'error',
          })
        }
      })
    } else {
      console.log('失败');
      loading.value = false
    }
  })
}
</script>

<style lang="less" scoped>
.login-container{
  width: 100vw;
  height: 100vh;
  background: url('https://free-img.400040.xyz/4/2024/07/03/6684faed62a83.webp') no-repeat center;
  background-size: 100% 100%;
  .title-container {
  .title {
    color: #fff;
    margin: 0px auto 40px auto;
    text-align: center;
    padding-top: 10px;
  }
}
  .login-form{
    width: 20vw;
    height: 20vh;
    border: 1px solid #f5f5f5;
    border-radius: 10px;
    padding: 10px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background:rgba(255, 255, 255, 0.3);
  }
  .content{
    padding-top: 25vh;
  }
}
::v-deep .el-input__wrapper{
  background-color: transparent;
}
</style>
